<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <div class="card" style="margin-top: 20px">
          <div class="card-body">
            <img :src="$store.state.user.photo" alt="" style="width: 100%" />
          </div>
        </div>
      </div>
      <div class="col-9">
        <div class="card" style="margin-top: 20px">
          <div class="card-body">
            <span style="font-size: 30px">我的Bot</span>
            <!-- 此处标签连接modal-->
            <button
              type="button"
              class="btn btn-info float-end"
              style="color: blue; font-size: 20px"
              data-bs-toggle="modal"
              data-bs-target="#add-bot"
            >
              创建新的Bot
            </button>
          </div>
          <hr />
          <div class="card-body">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="bot in bots" :key="bot.id">
                  <td>{{ bot.title }}</td>
                  <td>{{ bot.createTime }}</td>
                  <td>
                    <button
                      @click="save_bot_update(bot)"
                      type="button"
                      class="btn btn-info"
                      style="margin-right: 20px"
                      data-bs-toggle="modal"
                      :data-bs-target="'#show-update-' + bot.id"
                    >
                      查看详情
                    </button>
                    <!-- Modal 查看bot或修改bot    需要传入bot，只好放入循环中-->
                    <div
                      class="modal fade modal-xl"
                      :id="'show-update-' + bot.id"
                      tabindex="-1"
                      data-bs-backdrop="static"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h1 class="modal-title fs-5">Bot{{ bot.id }}</h1>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                              @click="refresh_bots()"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <div class="mb-3">
                              <label
                                for="show-update-bot-title"
                                class="form-label"
                                >名称</label
                              >
                              <input
                                v-model="botadd.title"
                                type="email"
                                class="form-control"
                                placeholder="请输入Bot名称"
                              />
                            </div>
                            <div class="mb-3">
                              <label
                                for="show-update-bot-description"
                                class="form-label"
                                >写简介</label
                              >
                              <textarea
                                v-model="botadd.description"
                                class="form-control"
                                rows="3"
                                placeholder="请输入简介"
                              ></textarea>
                            </div>
                            <div class="mb-3">
                              <label
                                for="show-update-bot-code"
                                class="form-label"
                                >你的代码</label
                              >
                              <VAceEditor
                                v-model:value="botadd.content"
                                lang="c_cpp"
                                theme="textmate"
                                style="height: 300px"
                                :options="{
                                  enableBasicAutocompletion: true, //启用基本自动完成
                                  enableSnippets: true, // 启用代码段
                                  enableLiveAutocompletion: true, // 启用实时自动完成
                                  fontSize: 18, //设置字号
                                  tabSize: 4, // 标签大小
                                  showPrintMargin: false, //去除编辑器里的竖线
                                  highlightActiveLine: true,
                                }"
                              />
                            </div>
                          </div>
                          <div class="modal-footer">
                            <div
                              class="error-message"
                              style="color: red; font-size: 16px"
                            >
                              {{ bot.error_message }}
                            </div>
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                              @click="refresh_bots()"
                            >
                              退出
                            </button>
                            <button
                              v-if="
                                bot.title !== botadd.title ||
                                bot.description !== botadd.description ||
                                bot.content !== botadd.content
                              "
                              type="button"
                              class="btn btn-primary"
                              @click="update_bot(bot)"
                            >
                              修改
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!----                             -->
                    <button
                      type="button"
                      class="btn btn-danger"
                      @click="save_bot(bot)"
                      data-bs-toggle="modal"
                      data-bs-target="#remove-bot"
                    >
                      删除
                    </button>
                  </td>
                  <!--    直接调用模态框，不过通过函数传输bot      -->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 创建BOT-->
  <div
    class="modal fade modal-xl"
    id="add-bot"
    tabindex="-1"
    data-bs-backdrop="static"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="add-bot-title">创建新的Bot</h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="add-bot-title" class="form-label">名称</label>
            <input
              v-model="botadd.title"
              type="email"
              class="form-control"
              id="add-bot-title"
              placeholder="请输入Bot名称"
            />
          </div>
          <div class="mb-3">
            <label for="add-bot-description" class="form-label">写简介</label>
            <textarea
              v-model="botadd.description"
              class="form-control"
              id="add-bot-description"
              rows="3"
              placeholder="请输入简介"
            ></textarea>
          </div>
          <div class="mb-3">
            <label for="add-bot-code" class="form-label">你的代码</label>
            <VAceEditor
              v-model:value="botadd.content"
              lang="c_cpp"
              theme="textmate"
              style="height: 300px"
              :options="{
                enableBasicAutocompletion: true, //启用基本自动完成
                enableSnippets: true, // 启用代码段
                enableLiveAutocompletion: true, // 启用实时自动完成
                fontSize: 18, //设置字号
                tabSize: 4, // 标签大小
                showPrintMargin: false, //去除编辑器里的竖线
                highlightActiveLine: true,
              }"
            />
          </div>
        </div>
        <div class="modal-footer">
          <div class="error-message" style="color: red; font-size: 16px">
            {{ botadd.error_message }}
          </div>
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            取消
          </button>
          <button type="button" class="btn btn-primary" @click="add_bot">
            创建
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal 删除bot -->
  <div
    class="modal fade"
    id="remove-bot"
    tabindex="-1"
    data-bs-backdrop="static"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="remove-bot-title" style="color: red">
            删除
          </h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">确认要删除这个bot吗?</div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            取消
          </button>
          <button
            type="button"
            class="btn btn-primary"
            data-bs-dismiss="modal"
            @click="remove_bot"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { Modal } from "bootstrap/dist/js/bootstrap";

import { VAceEditor } from "vue3-ace-editor"; //ace編輯器
import ace from "ace-builds";
import "ace-builds/src-noconflict/mode-c_cpp";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-language_tools";

export default {
  components: {
    VAceEditor,
  },

  setup() {
    ace.config.set(
      "basePath",
      "https://cdn.jsdelivr.net/npm/ace-builds@" +
        require("ace-builds").version +
        "/src-noconflict/"
    );

    const store = useStore();
    let bots = ref([]);
    let temporary_bot = null; // 临时存储要删除的bot的引用

    const botadd = reactive({
      title: "",
      description: "",
      content: "",
      error_message: "",
    });

    const refresh_bots = () => {
      //刷新页面(不刷新网页)
      $.ajax({
        url: "http://127.0.0.1:3030/user/bot/getList/",
        type: "get",
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          bots.value = resp;
        },
        error(resp) {
          console.log(resp);
        },
      });
    };

    const add_bot = () => {
      botadd.error_message = "";
      $.ajax({
        url: "http://127.0.0.1:3030/user/bot/add/",
        type: "post",
        data: {
          title: botadd.title,
          description: botadd.description,
          content: botadd.content,
        },
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          if (resp.error_message === "success") {
            botadd.title = "";
            botadd.content = "";
            botadd.description = "";

            Modal.getInstance("#add-bot").hide();
            refresh_bots();
          } else {
            botadd.error_message = resp.error_message;
          }
        },
      });
    };
    const update_bot = (bot) => {
      bot.error_message = "";
      $.ajax({
        url: "http://127.0.0.1:3030/user/bot/update/",
        type: "post",
        data: {
          botId: bot.id,
          title: botadd.title,
          description: botadd.description,
          content: botadd.content,
        },
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          if (resp.error_message === "success") {
            Modal.getInstance("#show-update-" + bot.id).hide();
            refresh_bots();
          } else {
            bot.error_message = resp.error_message;
          }
        },
      });
    };
    const save_bot = (bot) => {
      //临时存一下bot的数值，为modal的调用做准备.
      temporary_bot = bot;
    };
    const save_bot_update = (bot) => {
      botadd.title = bot.title;
      botadd.description = bot.description;
      botadd.content = bot.content;
    };
    const remove_bot = () => {
      //不用传值啦，因为存在全局变量temporary_bot里。
      $.ajax({
        url: "http://127.0.0.1:3030/user/bot/remove/",
        type: "post",
        data: {
          botId: temporary_bot.id,
        },
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          if (resp.error_message === "success") {
            refresh_bots();
            temporary_bot = null;
          }
        },
        error() {
          temporary_bot = null;
        },
      });
    };

    refresh_bots();
    return {
      bots,
      botadd,
      refresh_bots,
      add_bot,
      update_bot,
      save_bot,
      save_bot_update,
      remove_bot,
    };
  },
};
</script>

<style scoped></style>
